<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="payCont">
		<view class="pay-dian marin25">
			<view class="dian-name">
				王婆大虾双人餐
			</view>
			<view class="dian-time">
				有效期至：2022/03/24  23:59
			</view>
		</view>
		<view class="contA marin25">
			<!-- 购买内容店名等信息 -->
			<view class="buy-name">
				<view class="b-title">
					券码信息（1张可用）
				</view>
				<view class="b-num">
					·09865432567889
				</view>
			</view>
			<!-- 二维码 -->
			<view class="buy-code">
				<view class="yuan1">
					
				</view>
				<view class="yuan2">
					
				</view>
				<view class="img-border  ">
					<image :src="baseOssUrl + 'icon/erweima.png' " mode=""></image>
				</view>
			</view>
		</view> 
		<view class="succBtn">
			<fui-button text="完成" background="#35743D" width='96%' height='72rpx' :margin="['0', '17rpx']" radius='50rpx' @click="pricePopup" size="28"></fui-button>
		</view>
	</view>
</template>

<script>
	import {
		baseOssUrl
	} from '@/common/settings';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				baseOssUrl: baseOssUrl,
			}
		},
		onLoad() {

		},
		methods: {

			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			lookOrder(){
				uni.navigateTo({
					url:'/pages/foodOrderDetails/index'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.payCont {
		height: 100vh;
		background: #EFEFEF;
		padding-top: 24rpx;
		.pay-dian{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.dian-name{
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}
			.dian-time{
				font-size: 24rpx;
				color: #989898;
				margin-bottom: 32rpx;
			}
		}
		.contA {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			position: relative;
			

			.buy-name {
				font-size: 30rpx;
				font-weight: bold;
				margin:0 0 54rpx ;
				color: #35743D;
				.b-title{
					margin-bottom: 16rpx;
				}
				 
			}
			.buy-code{
				display: flex;
				justify-content: center;
				border-top: 1px dashed #BFD3C2;
				margin-bottom: 95rpx;
				
				.img-border{
					margin-top: 18rpx;
					width: 264rpx;
					height: 264rpx;
					border: 1rpx dashed #BFD3C2;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 240rpx;
						height: 240rpx;
						
					}
				}
				.yuan1{
					position: absolute;
					top: 24%;
					left: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
				.yuan2{
					position: absolute;
					top: 24%;
					right: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
				
			}
			
		}
		.succBtn{
			margin-top: 80rpx;
		}



	}
</style>
